<script lang="ts" setup>
import { QuillEditor } from "@vueup/vue-quill";
import ImageUploader from "quill-image-uploader/src/quill.imageUploader.js";
import { upload as uploadFile } from "@/utils/minio-upload";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  toolbar: {
    type: String,
    default: "full",
  },
  filePath: {
    type: String,
    default: "marketing-center/richtext/",
  },
  disabled:{
    type:Boolean,
    default:false
  }
});

const quill = ref(),
  quillContainer = ref();

const modules = {
  name: "imageUploader",
  module: ImageUploader,
  options: {
    upload: (file: any) => {
      console.log(file);
      return new Promise(async (resolve, reject) => {
        try {
          const result: any = await uploadFile(
            file,
            "marketing-center/rich-text"
          );
          resolve(result.url);
        } catch (e) {
          reject();
        }
      });
    },
  },
  toolbar: {
    handlers: {
      // handlers object will be merged with default handlers object
      size: function (value) {
        console.log(".....",value)
      },
    },
  },
};

// toolbar标题
const titleConfig = [
  { Choice: ".ql-insertMetric", title: "跳转配置" },
  { Choice: ".ql-bold", title: "加粗" },
  { Choice: ".ql-italic", title: "斜体" },
  { Choice: ".ql-underline", title: "下划线" },
  { Choice: ".ql-header", title: "段落格式" },
  { Choice: ".ql-strike", title: "删除线" },
  { Choice: ".ql-blockquote", title: "块引用" },
  { Choice: ".ql-code", title: "插入代码" },
  { Choice: ".ql-code-block", title: "插入代码段" },
  { Choice: ".ql-font", title: "字体" },
  { Choice: ".ql-size", title: "字体大小" },
  { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
  { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "对齐方式" },
  { Choice: ".ql-color", title: "字体颜色" },
  { Choice: ".ql-background", title: "背景颜色" },
  { Choice: ".ql-image", title: "图像" },
  { Choice: ".ql-video", title: "视频" },
  { Choice: ".ql-link", title: "添加链接" },
  { Choice: ".ql-formula", title: "插入公式" },
  { Choice: ".ql-clean", title: "清除字体格式" },
  { Choice: '.ql-script[value="sub"]', title: "下标" },
  { Choice: '.ql-script[value="super"]', title: "上标" },
  { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
  { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
  { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
  { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
  {
    Choice: '.ql-align .ql-picker-item[data-value="center"]',
    title: "居中对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="right"]',
    title: "居右对齐",
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
    title: "两端对齐",
  },
];

const emits = defineEmits(["update:modelValue", "change"]);

const onEditorChange = (value: any) => {
  emits("update:modelValue", value);
  emits("change", value);
};

const setHTML = (html: string) => {
  nextTick(() => {
    quill.value.setHTML(html);
  });
};

onMounted(() => {
  nextTick(() => {
    for (let item of titleConfig) {
      let tip = quillContainer.value.querySelector(
        ".ql-toolbar " + item.Choice
      );
      if (!tip) continue;
      tip.setAttribute("title", item.title);
    }
  });
});

defineExpose({ setHTML });
</script>
<template>
  <div ref="quillContainer">
    <quill-editor
      ref="quill"
      contentType="html"
      :toolbar="toolbar"
      :content="modelValue"
      :modules="modules"
      :readOnly="disabled"
      @update:content="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script lang="ts">
import "@vueup/vue-quill/dist/vue-quill.snow.css";
</script>
<style lang="scss" scoped>
.richText {
  font-size: 12px;
  margin-bottom: 10px;
  .name {
    line-height: 30px;
  }
  .tips {
    font-size: 12px;
    color: #666666;
    line-height: 20px;
    margin: 10px 0;
  }
}
</style>
